
import { useEffect, useState } from "react";
import { getPromotes, StopPromote } from "../../api/promote";
import { Button, Input, Space, Table, Tag, message, Checkbox, Spin, Pagination, Skeleton } from "antd"
import "../../css/order.css"
import React from 'react';
import "../../css/order.css"

const PAGE_SIZE = 6;// 设置每页显示的数据条数
const Promote = () => {
    const [loading, setLoading] = React.useState(false);
    const [type, setType] = useState([]);
    const [isEnd, setIsEnd] = useState('');
    const [currentPage, setCurrentPage] = useState(1);//当前页
    const [total, setTotal] = useState(0); // 定义total变量
    const [searchKeyword, setSearchKeyword] = useState('');//搜索关键字
    const [shows, setShows] = useState(true);//骨架屏
    const bindgoods = () => {
        setLoading(true)
        getPromotes({
            page: currentPage,
            limit: PAGE_SIZE,
            isEnd: isEnd,
            key: searchKeyword,
            // total:''
        }).then((res) => {
            if (res.result === 0) {
                setLoading(false)
                setType(res.data.data);
                setTotal(res.data.total);
                setShows(false);
            }
        })
    }
    useEffect(() => {
        bindgoods();
    }, [currentPage, isEnd, searchKeyword]);

    const handlePageChange = (page) => {
        setCurrentPage(page);
    };
    const check = (val) => {
        let hasOne = false;
        for (let i = 0; i < val.length; i++) {
            if (val[i] === 1) {
                hasOne = true;
                break;
            }
        }
        setIsEnd(hasOne);
        bindgoods();
    }

    const Type = [
        {
            title: "序号",
            render: (text, record, index) => `${index + 1}`
        },
        {
            title: '商品',
            dataIndex: 'goodsName',
        },
        {
            title: '供应商',
            dataIndex: 'supplier',
        },

        {
            title: '活动期间销量',
            dataIndex: 'promoteSales',
            key: 'promoteSales',
        },
        {
            title: '开始时间',
            dataIndex: 'begin',
            key: 'begin',
        },
        {
            title: '结束时间',
            dataIndex: 'end',
            key: 'end',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (_, record) => (
                <Tag color={record.status === 2 ? 'success' : 'warning'}>{record.status === 2 ? "进行中" : "已结束"}</Tag>
            ),
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 200,
            render: (record) => (
                <Space size="middle">
                    {record.status === 2 && (
                        <Button type="primary" danger onClick={() => cease(record)} >停止</Button>)}
                </Space>
            ),
        },

    ]

    const cease = async (record) => {
        setLoading(true)
        await StopPromote({
            id: record.id
        }).then((res) => {
            if (res.result === 0) {
                message.success(res.message, 1.5);
                bindgoods();
                setLoading(false);
            }
        })

    }
    return (
        <div className="exam-container">
            <Skeleton loading={shows} active={true} paragraph={{ rows: 10 }} rows={20} style={{ padding: '10px' }}>
                <Spin spinning={loading} delay={500}>
                    <div className="container">
                        <div className="content">
                            <div className="button">
                                <div className='box-button2'>
                                    <Space.Compact style={{ width: '100%', height: '40px' }}>
                                        <Input placeholder="商户名称/供应商名称/商品名称" value={searchKeyword}
                                            onChange={(e) => setSearchKeyword(e.target.value)} ></Input>
                                        <Button type="primary" ghost style={{ height: '40px' }}>搜索</Button>
                                    </Space.Compact>
                                </div>
                                <div>
                                    <Checkbox.Group onChange={check}>
                                        <Checkbox className="check" value={1}>已结束</Checkbox>
                                    </Checkbox.Group>
                                </div>
                            </div>
                            <div className="table">
                                <Table
                                    columns={Type}
                                    dataSource={type}
                                    bordered
                                    pagination={false}
                                />
                            </div>
                            <Pagination current={currentPage} total={total} pageSize={PAGE_SIZE} onChange={handlePageChange} className="pagination" />
                        </div>
                    </div>
                </Spin></Skeleton>
        </div>
    )
}
export default Promote;